﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>角色添加</title>
    <link type="text/css" rel="stylesheet" media="all" href="../../styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="../../styles/global_color.css"/>
    <script language="javascript" type="text/javascript">
        function showResultDiv(flag) {
            var divResult = document.getElementById("save_result_info");
            if (flag)
                divResult.style.display = "block";
            else
                divResult.style.display = "none";
        }
        function show(tip) {
            var tips = document.getElementById("notnull");
            if (tip)
                tips.style.display = "block";
            else
                tips.style.display = "none";
        }
        function cus(tip) {
            var cue = document.getElementById("notnull");
            if (tip)
                cue.style.display = "block";
            else
                cue.style.display = "none";
        }
    </script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../../images/logo.png" alt="logo" class="left"/>
    <a href="/logout">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <ul id="menu">
        <li><a href="/index" class="index_on"></a></li>
        <li><a href="/rolelist" class="role_off"></a></li>
        <li><a href="/adminList" class="admin_off"></a></li>
        <li><a href="/feelist" class="fee_off"></a></li>
        <li><a href="/accountlist" class="account_off"></a></li>
        <li><a href="/servicelist" class="service_off"></a></li>
        <li><a href="/billList" class="bill_off"></a></li>
        <li><a href="/reportList" class="report_off"></a></li>
        <li><a href="/userInfo" class="information_off"></a></li>
        <li><a href="/userModiPwd" class="password_off"></a></li>
    </ul>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <!--保存操作后的提示信息：成功或者失败-->
    <div id="save_result_info" class="save_success">保存成功！</div><!--保存失败，角色名称重复！-->
    <form action="" method="" class="main_form">
        <div class="text_info clearfix"><span>角色名称：</span></div>
        <div class="input_info">
            <input type="text" class="width200" id="in"/>
            <div id="notnull" class="validate_msg_medium" style="display: none"><span class="required">*</span> 不能为空，且为20长度的字母、数字和汉字的组合</div>
        </div>
        <div class="text_info clearfix"><span>设置权限：</span></div>
        <div class="input_info_high">
            <div class="input_info_scroll">
                <ul id="moduleUl">
                </ul>
            </div>
            <div id="cue" class="validate_msg_tiny" style="display: none"><span class="required">*</span>至少选择一个权限</div>
        </div>
        <div class="button_info clearfix">
            <input type="button" value="保存" class="btn_save" onclick="showResult();"/>
            <input type="button" value="取消" class="btn_save"/>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
    <br/>
    <span>版权所有(C)云科技有限公司 </span>
</div>
<script src="../../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    //动态获取权限
    $.ajax({
        url: "/allModule",
        type: "post",
        success: function (data) {
            console.log(data);
            for (var i in data) {
                var module = data[i];
//                console.log(module);
                $("#moduleUl").append("<li><input type='checkbox' name='check' value='" + module.moduleId + "'>" + module.name + "</li>");
            }
        }
    });
    //保存成功的提示消息
    function showResult() {
//        [\u4e00-\u9fa50-9A-Za-z]{6,20}
//    ^[a-zA-Z\d\_\u2E80-\u9FFF]{0,16}$
//        var ret = /[\u4e00-\u9fa50-9A-Za-z]{6,20}/;
//        var s =  ret.test($("#in").val());
        if ($("#in").val() == "") {
            show(true);
        }
       else {
            var modules = [];//定义一个数组
            $("input[name=check]").each(function (i, d) {
//           console.log(d)
                if (d.checked) {
                    modules.push(d.value);
                }
            });

            if (modules.length < 1) {
                cus(true)
            } else {
                $.ajax({
                    url: "/addRole",
                    type: "post",
                    data: {
                        rolename: $("#in").val(),
                        modules: modules
                    },
                    success: function () {
                        showResultDiv(true);
                        window.location.href = "/rolelist";
                    }
                });
            }
        }
    }
</script>
</body>
</html>